<template>
  <view :class="$style.login_container" class="relative flex-col-center">
    <button :class="$style.button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
      <image src="@/static/images/login/weChat.png" mode="widthFix" style="width: 40rpx; margin-right: 10rpx;" />
      <text>微信一键授权登陆</text>
    </button>
    <view class="user_info">
    </view>
  </view>
</template>

<script setup lang="ts">

import { getUserPhoneNumber } from '@/api'
import { wxLogin, setLocal } from "@/utils";


const onLogin = () => {
  wx.getUserProfile({
    desc: "用于完善资料",
    success: (res) => {
      // 头像信息存入local
      setLocal('avatarUrl', res.userInfo.avatarUrl)
      // 登录
      // wxLogin()
    },
  });
};

function getPhoneNumber(e: any) {
  console.log('获取手机号码', e);
  if (e.detail?.errMsg === "getPhoneNumber:ok") {
    // 用户登陆
    let params: any = {
      code: e.detail.code,
      xcxLx: 'lq'
    }
    getUserPhoneNumber(params).then((res: any) => {
      console.log('获取成功', res);
      if (res.result.resultCode === '000000') {
        // 缓存用户手机信息
        setLocal('phoneInfo', res.data.phoneInfo)
        wxLogin(res.data.phoneInfo?.phoneNumber)
      }
    }).catch((e: any) => {
      console.log('获取错误', e);
    })
  }
}

</script>

<style lang="less" module>
.login_container {
  width: 100vw;
  height: 100vh;


  .button {
    width: 80%;
    height: 88rpx;
    display: flex;
    background: rgba(5, 233, 5, 0.5);
    color: #ffffff;
    font-size: 30rpx;
    border: none;
    border-radius: 44rpx;
    justify-content: center;
    align-items: center;
    font-weight: 400;
  }
}
</style>
